<template>
	<app-layout>
		<view class="basicf">
			<view class="ftitle">
				<view class="">
					发放金币红包
				</view>
				<view class="ftimes">
					有效时间：自提交时间起24小时有效
				</view>
			</view>
			<view class="fbottom">
				<view class="fname">红包个数</view>
				<input type="number" class="input" placeholder="填写红包个数" :value="peonum" @input="blurp" />
			</view>
			<view class="fbottom">
				<view class="fname">总金币数量</view>
				<input type="number" class="input" placeholder="填写总金币数" :value="amoneynum" @input="blura" />
			</view>
			<view class="fbottom">
				<view class="fname">分享文字</view>
				<input type="text" class="input" placeholder="填写分享到群的文字" :value="sharetitle" @input="blurt" />
			</view>
			<!-- <view class="fbottom">
				<view class="fname">开始时间</view>
				<picker mode="date">
					<view>{{}}</view>
				</picker>
			</view> -->
			<!-- <view class="fbottom">
				<view class="fname">优惠券有效期</view>
				<radio-group name="time" class="ftime">
					<label>
						<radio :value="time1" /><text>有效天数</text>
					</label>
					<label>
						<radio :value="time2" /><text>时间段</text>
					</label>
				</radio-group>
			</view> -->
		</view>
		<view class="befbutton">
			<button class="fbutton bsbut" :open-type="openType"
				@click="formSubmit">{{openType == '' ? '提交' : '分享'}}</button>
		</view>
		<u-popup :mask="false" :maskCloseAble="false" :length="600" mode="center" v-model="isShowShare" :zoom="false"
			@close="isShowShare = false">
			<view class="more-box">
				<view class="title">
					金币红包创建成功，是否分享
				</view>
				<view class="dir-left-nowrap main-around cross-center">
					<view class="btnfor bsbut" @click="cancelshare">
						取消分享
					</view>
					<view class="btnfor">
						<button class="btnfor bwbut" open-type="share">确定分享</button>
					</view>
				</view>
			</view>
		</u-popup>
	</app-layout>
</template>

<script>
	import uPopup from '../../../components/basic-component/u-popup/u-popup.vue';
	export default {
		data() {
			return {
				amoneynum: '',
				peonum: '',
				sharetitle: '',
				openType: '',
				isShowShare: false,
				detail: '',
				imglist: ''
			};
		},
		components: {
			uPopup
		},
		onShareAppMessage() {
			this.cancelshare()
			return this.$shareAppMessage({
				title: this.sharetitle,
				path: '/pages/consumer/getredpak/getredpak',
				imageUrl: this.imglist == '' ? '' : this.imglist,
				params: {
					recpakid: this.detail.id
				}
			});
		},
		onLoad(options) {
			this.onReq(258)
		},
		/* computed: {
			openType() {
				if (this.amoneynum == '' ||
					this.peonum == '') {
					return ''
				} else {
					return 'share'
				}
			}
		}, */
		methods: {
			onReq(kid) {
				this.$request({
					url: this.$api.navs.catedetail,
					data: {
						keyword: kid
					}
				}).then((res) => {
					if (kid == 258) {
						this.imglist = res.data.list[0].icon_url
					}
				}).catch(() => {

				})
			},
			cancelshare() {
				this.isShowShare = false
				// uni.navigateBack()
			},
			changeType(e) {
				this.dtypeid = e.detail.value
			},
			blura(e) {
				this.amoneynum = e.detail.value
			},
			blurp(e) {
				this.peonum = e.detail.value
			},
			blurt(e) {
				this.sharetitle = e.detail.value
			},
			formSubmit: function(e) {
				const self = this;
				if (self.peonum == '') {
					uni.showToast({
						title: '请填写红包个数',
						icon: 'none'
					})
					return
				}
				if (self.amoneynum == '') {
					uni.showToast({
						title: '请填写总金币数',
						icon: 'none'
					})
					return
				}
				// console.log(self.amoneynum, '金币数额');
				// console.log(self.peonum, '红包数量');
				// console.log(self.amoneynum < self.peonum, '是否可以发布');
				if (Number(self.amoneynum) < Number(self.peonum)) {
					uni.showToast({
						title: '金币数量需大于等于红包个数',
						icon: 'none'
					})
					return
				}
				// let n_time = new Date().getTime() + 24 * 60 * 60
				// console.log(n_time, new Date().getTime());
				let s_time = self.$utils.datetime('Y-m-d h:i:s')
				// let e_time = self.$utils.datetime('Y-m-d h:i:s', n_time)
				// console.log(s_time, e_time);
				let params = {
					lottery_num: self.peonum,
					prize_num: self.amoneynum,
					start_time: s_time,
					end_time: '24',
					name: self.sharetitle
				}
				self.$request({
					url: self.$api.gcredpak.found,
					method: 'post',
					data: {
						formdata: JSON.stringify(params)
					}
				}).then((res) => {
					self.isShowShare = true
					self.detail = res.data.detail
					uni.showToast({
						title: "提交成功",
						icon: 'none'
					});
				}).catch(() => {
					// self.openType = 'share'
				})
			},
		},
	}
</script>

<style scoped lang="scss">
	.more-box {
		background-color: #FFFFFF;
		padding: 36rpx;
		border: 1rpx solid #CD9C62;
		border-radius: 8rpx;
		margin-bottom: 204rpx;

		.title {
			text-align: center;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 72rpx;
			line-height: 100rpx;
		}

		.btnfor {
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			padding: 0;
			border-radius: 8rpx;
		}
	}

	.basicf {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 42rpx 0;
		width: 686rpx;
		// background-color: #FFFFFF;
		margin: 32rpx auto 0;
		border-radius: 32rpx;
	}

	.ftitle {
		width: 100%;
		text-align: center;
		font-size: 32rpx;

		.ftimes {
			font-size: 28rpx;
			line-height: 56rpx;
			color: #CD9C62;
		}
	}

	.fbottom {
		width: 604rpx;
		margin: 32rpx auto 0;
		padding: 24rpx 36rpx;
		line-height: 72rpx;
		border-bottom: 2rpx solid #F2F2F2;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333333;
		background-color: #FFFFFF;
		border-radius: 12rpx;
	}

	.fbottom .fname {
		width: 230rpx;
	}

	.ftime {
		transform: scale(0.6);
		font-size: 21px;
		display: flex;
		flex-direction: column-reverse;
	}

	.peditext {
		color: #999999;
	}

	.fbottom .input {
		width: 374rpx;
	}

	.fbottom .input .logoStore {
		width: 170rpx;
		height: 170rpx;
		position: relative;
	}

	.fbottom .input .logoStore .remove {
		width: 40#{rpx};
		height: 40#{rpx};
		position: absolute;
		right: -16rpx;
		top: -10rpx;
		// background: $uni-important-color-red;
		background: #333333;
		color: #fff;
		border-radius: 50%;
		padding-bottom: 8#{rpx};
		font-size: 24#{rpx};
	}

	.fbottom .input .logoStore .image {
		width: 100%;
		height: 100%;
	}

	.fbottom .input .logoStore.bg {
		background: #F4F4F4;
		position: relative;
	}

	.fbottom .input .logoStore .logoStore-hor {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
	}

	.fbottom .input .logoStore .logoStore-ver {
		position: absolute;
		width: 80rpx;
		height: 2rpx;
		left: 48rpx;
		top: 87rpx;
		background: #FFFFFF;
		transform: rotate(90deg);
	}

	.fbottom .input.time {
		display: flex;
		align-items: center;
	}

	.fbottom .input .center {
		padding: 0 20rpx;
	}

	.befbutton {
		background: #342B2A;
		border-radius: 12rpx;
		width: 336rpx;
		height: 88rpx;
		margin: 0 auto 48rpx;
		overflow: hidden;
	}

	.fbutton {
		border-radius: 12rpx;
		width: 336rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-weight: bold;
		font-size: 36rpx;
	}

	.bsbut {
		color: #FFFFFF;
		background: #CD9C62;
	}

	.bgbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bwbut {
		background: #342B2A;
		color: #FFFFFF;
	}

	.bcbut {
		border: 1rpx solid #342B2A;
		color: #342B2A;
	}
</style>
